<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
    <el-form ref="form" :model="queryForm" :rules="rules" label-width="100px">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="部门名称" prop="dept_id">
            <el-select class="main-select-tree w" ref="selectTree" v-model="queryForm.deptName" >
              <el-option v-for="item in deptDatas" :key="item.value" :label="item.label"
                         :value="item.value" style="display: none;" />
              <el-tree class="main-select-el-tree" ref="selecteltree" :data="deptDatas" node-key="id"
                       highlight-current :props="defaultProps" @node-click="handleNodeClick"
                       :current-node-key="queryForm.dept_id" :expand-on-click-node="expandOnClickNode"
                       default-expand-all />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="人员名称" prop="assigner_id">
            <el-select v-model="queryForm.assigner_id" placeholder="请选择" style="width: 100%" >
              <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>


      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save" :loading="loading" :disabled="disabled">{{
        loading? '确定中 ...': '确 定'
      }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addAssignerId } from '@/api/warningOrderDept'
import {getDeptListByUser, getUserByDeptId} from "@/api/dept";
export default {
  name: 'fkSomeone',
  data() {
    return {
      queryForm: {
        id: '',
        delIds: '',
        dept_id: '',
        deptName: '',
        assigner_id:'',
      },
      loading: false,
      disabled: false,
      rules: {
        assigner_id: [
          { required: true, trigger: 'blur', message: '请指定人员' },
        ],
        dept_id: [
          { required: true, trigger: 'blur', message: '请选择部门' },
        ]
      },
      expandOnClickNode: true,
      options: [],
      deptDatas: [],
      defaultProps: {
        children: 'children',
        name: 'name'
      },
      options2: [],
      title: '',
      dialogFormVisible: false,
    }
  },
  created() {

  },
  methods: {
    showDia(row) {
      this.loading = false
      this.disabled = false
      this.title = '指派人员';
      this.dialogFormVisible = true
      this.queryForm.id = row.id;
      this.getDeptData()
    },
    // 四级菜单
    async formatData(data) {
      // console.log("部门tree：")
      // console.log(data)
      let options = [];
      data.forEach((item, key) => {
        options.push({ label: item.label, value: item.id });
        if (item.children) {
          item.children.forEach((items, keys) => {
            options.push({ label: items.label, value: items.id });
            if (items.children) {
              items.children.forEach((itemss, keyss) => {
                options.push({ label: itemss.label, value: itemss.id });
                if (itemss.children) {
                  itemss.children.forEach((itemsss, keysss) => {
                    options.push({ label: itemsss.label, value: itemsss.id });
                  });
                }
              });
            }
          });
        }
      });
      return options;
    },
    handleNodeClick(node) {
      this.$set(this.queryForm, "dept_id", node.id);
      this.$set(this.queryForm, "deptName", node.name);
      // this.queryForm.dept_id = node.id;
      this.getUserByDeptId()
      this.$refs.selectTree.blur();
    },
    async getUserByDeptId(){
      const {data} = await getUserByDeptId(this.queryForm.dept_id);
      var list = data;
      this.options2 = [];
      for (var i = 0 ; i < list.length ; i++){
        var x = {};
        x.value = list[i].id;
        x.label= list[i].name;
        this.options2.push(x);
      }

    },
    close() {
      this.$refs['form'].clearValidate();
      this.options2 = [];
      this.queryForm = this.$options.data().queryForm
      this.dialogFormVisible = false
    },

    save() {
      if (this.loading) {
        return
      }
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          this.loading = true
          this.disabled = true

          var x = {};
          x.id = this.queryForm.id;
          x.assigner_id = this.queryForm.assigner_id;

          console.log("x",x)

          addAssignerId(x).then((res) => {
            if (res.code == 0) {
              this.$baseMessage('指派成功', 'success')
              this.$emit('fetch-data')
              this.close()
            } else {
              this.loading = false
              this.disabled = false
            }
          })
        } else {
          return false
        }
      })
    },
    getDeptData() {
      getDeptListByUser().then((res) => {
        this.deptDatas = res.data
      })
      // const {data} = await getDeptList()
      // console.log("部门data：")
      // console.log(data)
      // this.deptDatas = data;
    },

  },
}
</script>
